import Link from 'next/link'
import Select from '@c/select'
import { getVodCollectionLines } from '@/api/vod'
import { useState } from 'react'
import styles from './index.module.scss'
import cm from 'classnames'
import SortSvg from '@c/svg/sort'
import { useRouter } from 'next/router'

const Index = props => {
  const { selectionInfo, lineGroup, collectionInfo } = props
  const [currLineGroup, updateLineGroup] = useState(lineGroup)
  const {
    query: { id: cid, ep }
  } = useRouter()
  const [playParams, setPlayParams] = useState({
    page: 1,
    sort: 1
  })
  // 更新剧集
  const updateLines = page => {
    setPlayParams({
      ...playParams,
      page
    })
    getVodCollectionLines({ cid, page, pageSize: selectionInfo.pageSize, sort: playParams.sort }).then(res => {
      updateLineGroup(res.data)
    })
  }
  const updateSort = () => {
    setPlayParams({
      ...playParams,
      sort: playParams.sort === 1 ? 2 : 1
    })
    const newData = {
      ...currLineGroup
    }
    newData.eporder = [...newData.eporder].reverse()
    updateLineGroup(newData)
  }

  return (
    <>
      {!selectionInfo.noSelections && (
        <div className={styles.orderBoxPhone}>
          <Select
            width={180}
            currentValue={selectionInfo.pageNo}
            list={selectionInfo.selectionGroup}
            onChange={updateLines}
          />
          <SortSvg sort={playParams.sort} onClick={updateSort} width={36} />
        </div>
      )}
      {Array.isArray(currLineGroup?.eporder) && (
        <div className={styles.jujiBoxPhone}>
          {currLineGroup.eporder?.map((item, index) => {
            const NodeType = () => {
              if (collectionInfo.isShows) {
                return item.videoName || item.eporder
              } else {
                return item.eporder
              }
            }
            return (
              <Link
                href={`/vod/play-official/${cid}/${item.eporder}`}
                replace
                key={index}
                className={cm(styles.jujiItem, {
                  [styles.jujiNormal]: !collectionInfo.isShows,
                  [styles.jujiActive]: item.eporder == ep,
                  [styles.jujiShows]: collectionInfo.isShows,
                  textEllipsis: collectionInfo.isShows
                })}
              >
                <NodeType />
              </Link>
            )
          })}
        </div>
      )}
    </>
  )
}

export default Index
